<template>
  <div id="category">
    <div class="category-nav-bar">
      <category-nav-bar></category-nav-bar>
    </div>
    <div class="cate-content">
      <category-left></category-left>
      <category-right></category-right>
    </div>
  </div>
</template>

<script>
  import CategoryNavBar from "./childComponents/CategoryNavBar";
  import CategoryLeft from "./childComponents/CategoryLeft";
  import CategoryRight from "./childComponents/CategoryRight";

  export default {
    name: "Catagory",
    components: {CategoryLeft,CategoryNavBar,CategoryRight},
  }
</script>

<style scoped>

  #category{
    height: 100vh;
  }
  .cate-content{
    display: flex;
    height: calc(100% - 44px - 49px);
  }
  .category-nav-bar {
    color: #fff;
    background-color: var(--color-tint);
  }
</style>
